<style scoped>

    body {
        background: rgb(149, 29, 28);
        position: relative;
    }

    .bg {
        display: block;
        width: 100%;
        margin: 0px auto;
    }

    .container {
        width: 100vw;
        height: 180vw;
        position: relative;
        top: 0px;
        z-index: 1;
    }

    .bg {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 0;
    }

    .dail {
        width: 74.9vw;
        height: auto;
        margin: 0px auto;
        margin-top: 2.5vw;
        display: block;
        background-size: 100%;
        position: relative;
    }

    .dail-button {
        width: 100%;
        display: block;
        transition: 3s;
        transform-origin: 50% 59.45%;
    }

    .dail-count {
        width: 100%;
        height: 2.6vw;
        font-size: 2.6vw;
        line-height: 2.6vw;
        text-align: center;
        color: #f6d176;
        margin-top: 55.2vw;
    }

    .dail-content {
        transition: 3s;
    }

    @keyframes content {
        from {
            top: 19vw;
            height: 15vw;
        }
        to {
            height: 42vw;
            top: -19vw;
        }
    }

    .envelope-content-dot > div {
        width: 20px;
        height: 20px;
        float: left;
        background: #eb5954;
        border: 0px;
        border-radius: 10px;
    }

    .explain-content h2 {
        font-size: 2.6rem;
        line-height: 2.6rem;
        font-weight: bolder;
        text-align: center;
    }

    .explain-content h3 {
        text-align: center;
        font-size: 2.05rem;
        margin-top: 35px;
    }

    .explain-content p {
        font-size: 2.05rem;
        line-height: 3rem;
    }

    @keyframes rewardContent {
        from {
            right: -580px;
        }
        to {
            right: 0px;
        }
    }

    .reward-content h3 {
        width: 90vw;
        height: 13vw;
        background: #ff6666;
        line-height: 13vw;
        text-align: center;
        font-size: 3.07rem;
        color: #fff;
        font-weight: bolder;
    }

    .dail-button-content {
        width: 16.5vw;
        margin: 0px auto;
        position: absolute;
        top: 26.5vw;
        left: 29.5vw;
    }

    .dail-button-box {
        position: relative;
    }

    @keyframes lamplight {
        from {
            opacity: .2;
        }
        to {
            opacity: 1;
        }
    }

    .dail-lamplight {
        position: absolute;
        width: 101%;
        top: -2px;
        left: -1px;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-name: lamplight;
        -webkit-animation-duration: 2700ms;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
    }

    .dail-side {
        position: absolute;
        top: 0px;
    }

    @keyframes prize {
        from {
            transform:scale(.1);
        }
        to {
            transform:scale(1);
        }
    }

    .prize-content {
        width: 70.6vw;
        margin-top: 35.7vw;
        margin-left: 14.6vw;
        height:89vw;
        position: relative;
        animation: prize .5s;
    }

    .prize-bg, .prize-content-main {
        position: absolute;
        width: 70.6vw;
    }

    .info-content {
        width: 70.8vw;
        height: 97vw;
        margin: 14.6vw;
        background: url("../../static/images/info_bg.png") no-repeat center center;
        background-size: 70.8vw;
    }

    .info-content-input {
        height: 8vw;
        width: 48.2vw;
        margin-left: 18.4vw;
        border: 0px;
        line-height: 8vw;
        font-size: 2.9vw;
    }

    .info-content-username {
        margin-top: 43.2vw;
    }

    .info-content-mobile, .info-content-address {
        margin-top: 2.9vw;
    }

    .info-content-submit {
        color: #b34315;
        width: 64vw;
        margin: 0px auto;
        margin-top: 9.2vw;
        text-align: center;
        line-height: 9.2vw;
        height: 9.2vw;
    }

    .prize, .info, .success {
        display: none;
    }

    .prize-content-title {
        color: #ffe69d;
        text-align: center;
        margin-top: 21.7vw;
    }

    .prize-content-img {
        width: 32.5vw;
        height: 32.5vw;
        background: #f1ca97;
        margin: 0px auto;
        margin-top: 3.2vw;
        display: block;
    }

    .prize-content-img img {
        width: 29.3vw;
        height: 29.3vw;
        margin-left: 1.6vw;
        margin-top: 1.6vw;
    }

    .prize-content-fill, .prize-content-restart {
        width: 38.9vw;
        display: block;
        margin: 0px auto;
        margin-top: 2vw;
    }
    .success-img{
        width:48.9vw;
        margin-top:51.8vw;
        margin-left:25.5vw;
    }
</style>
<template>
    <div class="Dail">
        <img class="bg img-responsive" src="http://static.bestpeng.com/static/images/dail_bg.jpg" alt="">
        <div class="container over">
            <div class="dail-count">我的积分：<span class="dail-count-number">{{reply}}</span>分</div>
            <div class="dail">
                <img class="dail-lamplight" src="" alt="">
                <img class="dail-content img-responsive" src="http://static.bestpeng.com/static/images/dail_content.png"
                     alt="">
                <img class="dail-side img-responsive" src="http://static.bestpeng.com/static/images/dail_side.png"
                     alt="">
                <div class="dail-button-content" @click="draw">
                    <div class="dail-button-box">
                        <img class="dail-button" src="http://static.bestpeng.com/static/images/dail_pointer.png" alt="">
                    </div>
                </div>
            </div>
            <div class="prize shade">
                <div class="prize-content">
                    <img class="prize-bg img-responsive" src="static/images/prize_bg.png" alt="">
                    <div class="prize-content-main">
                        <p class="prize-content-title">{{prizeTitle}}</p>
                        <div class="prize-content-img" @click="prizeContent">
                            <img v-bind:src="prizeImg" alt="">
                        </div>
                        <img class="prize-content-fill" v-if="prizeType==2" @click="showForm" src="static/images/dail_fill.png" alt="">
                        <img class="prize-content-fill" v-if="prizeType==1" src="static/images/dail_skip.png" @click="skip" alt="">
                        <img class="prize-content-restart" @click="restartDraw" src="static/images/dail_restart.png"
                             alt="">
                    </div>
                </div>
            </div>
            <div class="info shade">
                <div class="info-content">
                    <input type="text" name="username" placeholder="请填写您的姓名"
                           class="info-content-username info-content-input">
                    <input type="number" name="mobile" placeholder="请填写您的手机"
                           class="info-content-mobile info-content-input">
                    <input type="text" name="address" placeholder="请填写您的地址"
                           class="info-content-address info-content-input">
                    <div class="info-content-submit" @click="submitForm">提交信息</div>
                </div>
            </div>
            <div class="success shade" @click.prevent="hideShade()">
                <img class="success-img" src="static/images/dail_success.png" alt="">
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Dail',
        data () {
            return {
                reply: 0, // 积分
                isShade: true, // 抽奖按钮开关
                apiHost: 'http://answer-api.chenrilong.top/', // api的链接
                positionsId: 1, // 活动id
                circle: 6, // 转的圈数
                advertiId: 1, // 奖品id
                prizeImg: '', // 奖品图片链接
                prizeTitle: '', // 奖品标题
                prizeLink: '', // 奖品链接
                prizeType: 1, // 奖品类型 1为优惠券，2为奖品
            }
        },
        created (){
            var that = this;
            that.reply = localStorage.getItem('reply');
        },
        methods: {
            draw: function () {
                var that = this;
                var dail = $('.dail-content');

                // 验证是否可以抽奖
                if (!that.isShade) {
                    return false;
                } else {
                    that.isShade = false;
                }

                // 判断抽奖次数是否足够
                if (that.reply < 10) {
                    that.isShade = true;
                    alert('您已经没有积分抽奖了哦');
                    return false;
                } else {
                    that.reply -= 10;
                    localStorage.setItem('reply', that.reply);
                }

                var url = that.apiHost + 'api/draw/' + that.positionsId;
                that.$http.get(url).then(function (response) {
                    var data = response.data.data

                    // 获取信息
                    var position = data.position;
                    that.advertiId = data.id;
                    that.prizeImg = data.imgurl
                    that.prizeTitle = data.name
                    that.prizeLink = data.link

                    // 判断奖品位置
                    switch (parseInt(position)) {
                        case 1:
                            var random = that.randomNum(0, 21);
                            break;
                        case 2:
                            var random = that.randomNum(51, 78);
                            break;
                        case 3:
                            var random = that.randomNum(105, 132);
                            break;
                        case 4:
                            var random = that.randomNum(160, 194);
                            break;
                        case 5:
                            var random = that.randomNum(227, 253);
                            break;
                        case 6:
                            var random = that.randomNum(282, 318);
                            break;
                    }

                    // 组合转的圈数
                    var deg = 360 * that.circle;

                    that.circle += 7;
                    var degStr = 'rotate(' + (parseInt(deg) + parseInt(random)) + 'deg)'

                    // 转盘转动画
                    dail.css('transform', degStr);

                    // 修改弹出框内容
                    $('.envelope-content-img').attr('src', data.imgurl); // 素材
                    $('.prize-envelope-title').text(data.official);
                    $('.prize-envelope-button').attr('href', data.link);
                    that.prizeType = data.bliling; // 类型

                    setTimeout(function () {
                        that.isShade = true
                        $('.prize').show()
                    }, 3000)

                })


            },
            // 生成随机数
            randomNum: function (Min, Max) {
                var Range = Max - Min;
                var Rand = Math.random();
                var num = Min + Math.floor(Rand * Range); //舍去

                return num;
            },
            // 提交信息
            submitForm: function () {
                var that = this;
                var nickname = $('.info-content-username').val();
                var mobile = $('.info-content-mobile').val();
                var address = $('.info-content-address').val();

                // 验证手机号码
                that.checkMobil(mobile, $('.info-content-mobile'));

                // 验证地址
                var res = that.checkAddress(address);
                if (!res) {
                    alert('地址不能为空')
                }

                var url = that.apiHost + 'api/apply';
                var data = {
                    params: {
                        activities_id: 1,
                        adverti_id: that.advertiId,
                        nickname: nickname,
                        mobile: mobile,
                        address: address,
                    },
                }
                that.$http.get(url, data).then(function (response) {
                    if(response.data.error === 0) {
                        that.showSuccess();
                        setTimeout(function (){
                            location.href = that.prizeLink
                        }, 2000)
                    } else if(response.data.error === 1) {
                        alert(response.data.message)
                    }
                })
            },
            // 跳转链接
            prizeContent: function () {
                location.href = this.prizeLink
            },
            // 重新抽奖
            restartDraw: function () {
                $('.prize').hide()
            },
            // 显示填写中奖信息
            showForm: function () {
                $('.prize').hide();
                $('.info').show();
            },
            // 信息提交成功提示
            showSuccess: function () {
                $('.info').hide()
                $('.success').show();
            },
            // 跳转到奖品链接
            skip: function () {
                location.href = this.prizeLink;
            },
            // 隐藏shade
            hideShade: function () {
                $('.shade').hide()
            },
            // 验证手机号码是否正确
            checkMobil: function (check_submit_mobil, el) {
                if (check_submit_mobil == "") {
                    alert("手机号码不能为空！");
                    el.focus();
                    return false;
                }

                if (check_submit_mobil.length != 11) {
                    alert("手机号码长度必须为11");
                    el.focus();
                    return false;
                }

                if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(check_submit_mobil))) {
                    alert("手机号码格式不正确！");
                    el.focus();
                    return false;
                }
                return true;
            },
            // 判断用户名字
            checkName: function (name) {
                //判断姓名1不能为空
                function ltn(name) {
                    var ltn = name
                    if (ltn == "") {
                        alert("真实姓不能为空");
                        return false;
                    } else {
                        return validate(ltn);
                    }
                }

                // 判断是不是测试名字
                function test(name) {
                    if (name == '测试' || name == '天创') {
                        return true;
                    } else {
                        return ltn(name)
                    }
                }

                //验证名字是否百家姓
                function validate(ltn) {
                    var reg = /^([u4E00-u9FA5])*$/;
                    if (ltn.length == 1 || reg.test(ltn) == true) {
                        alert(" 请填写正确的名称");
                        return false;
                    } else {
                        if (!check_surname(ltn)) {
                            alert("请填写正确的名称");
                            return false;
                        } else {

                            if (black_list(ltn)) {
                                return true;
                            } else {
                                alert("请填写正确的名称")
                            }

                        }
                    }
                }

                //验证名字后面不可以有某个文字
                function black_list(name) {
                    var reg = /(?!.*先生.*|.*小姐.*|.*生.*|.*男士.*|.*女士.*|.*太太.*)^[\u4e00-\u9fff]{0,}$/g;
                    return reg.test(name)
                }

                //验证百家姓3
                function check_surname(str) {
                    var str = str.substr(0, 1); //截取用户提交的用户名的前两字节，也就是姓。
                    var surname = " 赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章云苏潘葛奚范彭郎鲁韦昌马苗凤花方俞任袁柳酆鲍史唐费廉岑薛雷贺倪汤 滕殷罗毕郝邬安常乐于时傅皮卞齐康伍余元卜顾孟平黄和穆萧尹姚邵堪汪祁毛禹狄米贝明臧计伏成戴谈宋茅庞熊纪舒屈项祝董粱杜阮蓝闵席季麻强贾路娄危江童颜郭 梅盛林刁钟徐邱骆高夏蔡田樊胡凌霍虞万支柯咎管卢莫经房裘缪干解应宗宣丁贲邓郁单杭洪包诸左石崔吉钮龚程嵇邢滑裴陆荣翁荀羊於惠甄魏加封芮羿储靳汲邴糜松 井段富巫乌焦巴弓牧隗山谷车侯宓蓬全郗班仰秋仲伊宫宁仇栾暴甘钭厉戎祖武符刘姜詹束龙叶幸司韶郜黎蓟薄印宿白怀蒲台从鄂索咸籍赖卓蔺屠蒙池乔阴郁胥能苍双 闻莘党翟谭贡劳逄姬申扶堵冉宰郦雍郤璩桑桂濮牛寿通边扈燕冀郏浦尚农温别庄晏柴瞿阎充慕连茹习宦艾鱼容向古易慎戈廖庚终暨居衡步都耿满弘匡国文寇广禄阙东 殴殳沃利蔚越夔隆师巩厍聂晁勾敖融冷訾辛阚那简饶空曾毋沙乜养鞠须丰巢关蒯相查后江红游竺权逯盖益桓公万俟司马上官欧阳夏侯诸葛闻人东方赫连皇甫尉迟公羊 澹台公冶宗政濮阳淳于仲孙太叔申屠公孙乐正轩辕令狐钟离闾丘长孙慕容鲜于宇文司徒司空亓官司寇仉督子车颛孙端木巫马公西漆雕乐正壤驷公良拓拔夹谷宰父谷粱 晋楚闫法汝鄢涂钦段干百里东郭南门呼延妫海羊舌微生岳帅缑亢况後有琴梁丘左丘东门西门商牟佘佴伯赏南宫墨哈谯笪年爱阳佟第五言福";
                    var r = surname.search(str);             // 查找字符串。
                    if (r == -1) {
                        return false
                    } else {
                        return true
                    }
                }

                return test(name)
            },
            // 验证地址
            checkAddress: function (address) {
                if (address) {
                    return true;
                } else {
                    return false;
                }
            },
        }
    }
</script>